import {useNavigation} from '@react-navigation/native';
import React, {memo, useCallback} from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  StyleSheet,
  Pressable,
} from 'react-native';
import LazyloadImg from '../base/LazyloadImg';
import PatIcon from '../base/PatIcon';
import Colors from '../../utils/Colors';
import {useSelector, useDispatch} from 'react-redux';
import ScrollColorView from './ScrollColorView.js';

const ProductItem = ({item}) => {
  const isLogin = useSelector(state => state.user.isLogin);
  const dispatch = useDispatch();
  const navigation = useNavigation();
  const onPress = useCallback(
    data => {
      return e => {
        // 去某些页面
        console.log(e.nativeEvent, navigation);
        // navigation.push('product-root', {product: data});
      };
    },
    [navigation],
  );
  const onLike = useCallback(
    data => {
      return () => {
        console.log(data, 'like');
        if (isLogin) {
          // 执行收藏事件
          console.log('执行收藏事件');
        } else {
          // 弹出登录界面
          dispatch({type: 'user/setShowLoginRegister', payload: true});
        }
        // 喜欢
      };
    },
    [isLogin, dispatch],
  );
  const isLike = false;
  return (
    <View style={style.productItem}>
      <TouchableHighlight
        activeOpacity={0.6}
        underlayColor="#DDDDDD"
        onPress={onPress(item)}>
        <View style={style.box}>
          <LazyloadImg style={style.image} source={{uri: item.icon}} />
          <Text numberOfLines={2} style={style.title}>
            {item.product_name}
          </Text>
          <ScrollColorView colorBlocks={item.color_blocks}></ScrollColorView>
          <View style={style.priceBox}>
            <Text style={style.price}>{item.price}</Text>
            <Text style={style.oldPrice}>
              {item.store_price && item.store_price - item.price > 0
                ? item.store_price
                : ''}
            </Text>
          </View>
          <Pressable
            onPress={onLike(item)}
            style={isLike ? style.like : style.noLike}
            hitSlop={10} // 扩大距离
            RippleConfig={{
              color: Colors.patFontRed, // 波纹颜色
              borderless: false, // 是否包含边框
              radius: 10, //波纹半径
            }}>
            {isLike ? (
              <PatIcon
                name="collect-fill"
                size={16}
                color={Colors.patFontRed}
              />
            ) : (
              <PatIcon name={'collect'} size={16} color={Colors.patFontGray} />
            )}
          </Pressable>
        </View>
      </TouchableHighlight>
    </View>
  );
};
const style = StyleSheet.create({
  image: {
    width: '100%',
    height: 200,
    backgroundColor: Colors.white,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
  },
  productItem: {
    width: '50%',
    paddingLeft: '1.2%',
    paddingRight: '1.2%',
    position: 'relative',
  },
  box: {
    backgroundColor: Colors.white,
    borderRadius: 10,
    paddingBottom: 10,
  },
  title: {
    marginTop: 10,
    fontSize: 14,
    lineHeight: 16,
    height: 32,
    overflow: 'hidden',
    textDecorationLine: 'none',
    paddingLeft: 10,
    paddingRight: 10,
  },
  priceBox: {
    paddingLeft: 10,
    marginTop: 10,
    height: 20,
    display: 'flex',
    flexWrap: 'nowrap',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-end',
  },
  price: {
    color: Colors.patFontRed,
    fontSize: 16,
  },
  oldPrice: {
    marginLeft: 6,
    color: Colors.patFontGray,
    fontSize: 12,
    textDecorationLine: 'line-through',
  },
  like: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    right: 5,
    top: 5,
    width: 26,
    height: 26,
    borderRadius: 50,
  },
  noLike: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: Colors.white,
    position: 'absolute',
    right: 5,
    top: 5,
    width: 26,
    height: 26,
    borderRadius: 50,
  },
});

export default memo(ProductItem);
